<template>
  <div class="report-main" ref="all">
    <div class="top">
      <div>
        <el-button
          type="primary"
          size="small"
          style="margin-left: 10px"
          :disabled="disabled"
          @click="deleteRows"
          >{{ $t("删除选中项", "processCenter.deleteSelect") }}</el-button
        >
      </div>
      <el-input
        v-model="search"
        size="small"
        style="width: 300px"
        :placeholder="$t('流程名称', 'processCenter.processName')"
        suffix-icon="el-icon-search"
        @keydown.native.enter="getList"
      ></el-input>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="selectonChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          :label="$t('标题', 'processCenter.title')"
          prop="app_name"
        ></el-table-column>
        <el-table-column
          :label="$t('保存时间', 'processCenter.saveTime')"
          prop="submit_time"
        ></el-table-column>
        <el-table-column :label="$t('操作', 'processCenter.operate')">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="operate(1, scope.row.process_id, scope.row.app_id)"
              >{{ $t("编辑", "processCenter.edit") }}</el-button
            >
            <el-button
              type="text"
              @click="operate(0, scope.row.process_id, scope.row.app_id)"
              >{{ $t("删除", "processCenter.delete") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50, 100]"
      :current-page.sync="pageInfo.current_page"
      :page-size="pageInfo.page_size"
      layout="total, sizes, prev, pager, next"
      :total="pageInfo.total"
      style="margin-bottom: 10px; margin-top: 10px"
    >
    </el-pagination>
  </div>
</template>
<script>
import { deleteProcess, getTargetProcessInfo, updateRecentUse } from "@/http/api";
import base from "./base.vue";
import dayjs from "dayjs";
import tools from "@/utils/tools";
export default {
  extends: base,
  name: "drafts",
  data() {
    return {
      search: "",
      tableData: [],
      disabled: true,
      selectedRow: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await getTargetProcessInfo({
        mode: "drafts",
        ...this.pageInfo,
        key: this.search,
      });
      if (res.code === 20041) {
        this.pageInfo = res.data.page;
        this.tableData = res.data.rows;
        this.tableData.forEach((element) => {
          element.submit_time = dayjs(element.submit_time).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        });
      }
    },
    async operate(type, process_id, app_id) {
      if (type) {
        let res = await updateRecentUse(app_id);
        if (res.code === 20031) {
          localStorage.setItem("userInfo", JSON.stringify(res.data));
        }
        this.$router.push({
          path: tools.getUrl(app_id),
          query: { process_id, mode: "submit" },
        });
      } else {
        this.$confirm(
          this.$t("确认删除已选中的表单？", "processCenter.confirmDelete"),
          {
            confirmButtonText: this.$t("确定", "processCenter.confirm"),
            cancelButtonText: this.$t("取消", "processCenter.cancel"),
            type: "warning",
            callback: async (action) => {
              if (action === "confirm") {
                let res = await deleteProcess(process_id);
                if (res.code === 20021) {
                  this.$message.success(
                    this.$t("删除成功", "processCenter.deleteSuccess")
                  );
                  this.getList();
                }
              }
            },
          }
        );
      }
    },
    selectonChange(selection) {
      this.selectedRow = selection;
      if (selection.length) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    async deleteRows() {
      this.$confirm(
        this.$t("确认删除已选中的表单？", "processCenter.confirmDelete"),
        {
          confirmButtonText: this.$t("确定", "processCenter.confirm"),
          cancelButtonText: this.$t("取消", "processCenter.cancel"),
          type: "warning",
          callback: async (action) => {
            if (action === "confirm") {
              let success = true;
              for (let i = 0; i < this.selectedRow.length; i++) {
                let res = await deleteProcess(this.selectedRow[i].process_id);
                if (res.code !== 20021) {
                  success = false;
                }
              }
              if (success) {
                this.$message.success(
                  this.$t("删除成功", "processCenter.deleteSuccess")
                );
                this.getList();
              }
            }
          },
        }
      );
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  padding: 20px 0 16px;
  display: flex;
  justify-content: space-between;
}
</style>
